<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Download</title>
    <!-- <link rel="stylesheet" href="styles.css" /> -->
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .background-image {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        z-index: -1;
      }
      .content {
        position: relative;
        width: 80%;
        margin: 50px auto;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      h1 {
        text-align: center;
        color: #333;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
      table,
      th,
      td {
        border: 1px solid #ddd;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      tr:nth-child(even) {
        background-color: #f9f9f9;
      }
      tr:hover {
        background-color: #f1f1f1;
      }
      audio {
        position: absolute; /* 使用绝对定位 */
        right: 20px; /* 距离页面右边20px */
        top: 50px; /* 距离页面顶部20px */
        width: 20%; /*设置控件的宽度 */
        height: 50px auto; /* 设置控件的高度*/
        border: 2px solid #333; /* 添加边框 */
        border-radius: 10px; /* 边框圆角 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        outline: none; /* 移除焦点时的轮廓线 */
      }
    </style>
  </head>
  <body>
    <div
      class="background-image"
      style="background-image: url('./webPage/bgimg.jpg')"
    ></div>
    <div class="content">
      <div>
        <audio src='./webPage/bgmusic.mp3' controls="controls" loop>
          你的浏览器不支持audio元素
        </audio>
      </div>
      <h1>Download</h1>
      <table>
        <tr>
          <th>File</th>
          <th class="right-align">Date</th>
          <th class="right-align">Size</th>
        </tr>
		 </table>
    </div>
  </body>
</html>